<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="增值服务" left-arrow right-text="我的钱包" fixed @click-left="$router.back()"  @click-right="$router.push({name:'company-my-wallet'})"/>
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top my-store">
          <van-tabs v-model="tabIndex" animated swipeable sticky :offset-top="46">
            <van-tab title="我的服务">
							<MyEmpty v-if="jobTopList.length == 0"></MyEmpty>
              <dl class="my-goods type01" v-else>
                <dt>
                  <img src="@/assets/img/company/my/store_ico05.png" alt="" />
                  <b>搜索页职位置顶</b>
                </dt>
                <dd v-for="item,index in jobTopList" :key="index">
                  <p>
                    <b>{{item.stationName}}</b>
                    <b>第{{item.topPage}}页</b>
                    <b>{{item.topDates}}</b>
                    <!-- <b>2020-12-22,2020-12-23,2020-12-24,2020-12-25</b> -->
                  </p>
                  <p>
                    <van-switch size="22px" v-model="item.statueSwitch" @change="topJobSwtichChange(item.statueSwitch,item.orderID)" />
                    <span class="begin">{{item.statue==1?"已开始":"未开始"}}</span>
                  </p>
                </dd>
              </dl>

              <!-- <dl class="my-goods type02">
                <dt>
                  <img src="@/assets/img/company/my/store_ico04.png" alt="" />
                  <b>职位自动刷新</b>
                </dt>
                <dd>
                  <b>08月29日-09月12日</b>
                </dd>
              </dl> -->
            </van-tab>

            <van-tab title="服务购买">
              <dl class="goods-list">
                <dt>增加曝光度</dt>
                <dd class="hot" @click="$router.push({name:'company-my-service-jobtopbuy'})">
                  <img src="@/assets/img/company/my/store_ico05.png" alt="" />
                  <p>
                    <b>搜索页职位置顶</b>
                    <span>置顶职位，第一眼就是您！</span>
                  </p>
                </dd>
                <!-- <dd class="hot">
                  <img src="@/assets/img/company/my/store_ico04.png" alt="" />
                  <p>
                    <b>名企专区</b>
                    <span>增加曝光，获得更高关注度！</span>
                  </p>
                </dd> -->
              </dl>
            </van-tab>
          </van-tabs>
        </div>
        <!-- 内容 end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, Tab, Tabs, Button, Sticky, Switch, Toast } from "vant";
import Global from '@/Global';
export default {
  name: "listPage",
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
    [Switch.name]: Switch,
  },
  // 定义属性
  data() {
    return {
      //tab
      tabIndex: 0,
      //loading
      skeletonLoading: true,
      //data
      jobTopList: [],
    };
  },
  mounted() {
		let qTabeIndex = this.$route.query.tabIndex;
		if(qTabeIndex)
			this.tabIndex = qTabeIndex;
    this.loadData();
		this.$bus.$on(Global.bus_company_service_update,()=>{
			this.loadData()
		});
  },
  // 方法集合
  methods: {
    loadData() {
      this.$api.get('/CompanyMine/GetMyJobTopList').then(res => {
        this.skeletonLoading = false;
        if (res.success) {
          this.jobTopList = res.response;
        }
      })
    },
    topJobSwtichChange(switchStatue,orderID) {
			// console.log(switchStatue)
      this.$api.post(`/CompanyMine/JobTopServiceChangeStatue?orderID=${orderID}&switchStatue=${switchStatue}`).then(res=>{
				Toast(res.msg);
			})
    }
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>